<template>
  <div class="box">
    <el-drawer
      :visible.sync="dialogVisible"
      :title="isSHOW ? $t('shangHuRuZhuShenHe') : $t('shangHuXiangQing')"
      :direction="direction"
      @close="close"
      size="700px"
    >
      <div class="demo-drawer__content divBox">
        <el-form ref="dataForm" :inline="true" :model="dataForm" label-width="100px" v-if="dialogVisible">
          <el-form-item :label="$t('shangHuMingCheng')" prop="name">
            <el-input v-model="dataForm.name" :readonly="isDisabled" :placeholder="$t('qingShuRuShangHuMingCheng')" />
          </el-form-item>
          <el-form-item :label="$t('shangHuZhangHao')">
            <el-input v-model="dataForm.email" :readonly="isDisabled" :placeholder="$t('qingShuRuShangHuZhangHao')" />
          </el-form-item>
          <!-- <el-form-item :label="$t('shangHuFenLei')" prop="categoryId">
            <span class="widths">{{ dataForm.categoryId | merCategoryFilter }}</span>
          </el-form-item> -->
          <el-form-item :label="$t('dianPuLeiXing')" prop="typeId">
            <span class="widths">{{ dataForm.typeId | merchantTypeFilter }}</span>
          </el-form-item>
          <el-form-item v-if="dataForm.password" :label="$t('dengLuMiMa')" prop="password">
            <el-input v-model="dataForm.password" :readonly="isDisabled" :placeholder="$t('qingShuRuDengLuMiMa')" />
          </el-form-item>
          <el-form-item :label="$t('shangHuXingMing')" prop="realName">
            <el-input
              v-model="dataForm.realName"
              :readonly="isDisabled"
              :placeholder="$t('qingShuRuShangHuXingMing')"
            />
          </el-form-item>
          <el-form-item :label="$t('shangHuShouJiHao')" prop="phone">
            <span class="widths">{{ dataForm.phone | filterEmpty }}</span>
          </el-form-item>
          <el-form-item prop="email" :label="$t('youXiang')" class="inline">
            <el-input v-model="dataForm.email" :readonly="isDisabled"></el-input>
          </el-form-item>
          <el-form-item :label="$t('shouXuFei') + '(%)'" prop="handlingFee">
            <el-input :disabled="isDisabled" v-model="dataForm.handlingFee" :min="0" :precision="2"></el-input>
          </el-form-item>
          <el-form-item :label="$t('shangHuDiZhi')" prop="address" class="lang">
            <span class="langcent">{{ dataForm.address }}</span>
          </el-form-item>
          <el-form-item :label="$t('shangHuGuanJianZi')" prop="keywords" class="inline">
            <el-input
              v-model="dataForm.keywords"
              :readonly="isDisabled"
              :placeholder="$t('qingShuRuShangHuGuanJianZi')"
            />
          </el-form-item>
          <el-form-item :label="$t('beiZhu')" prop="remark" class="lang">
            <span class="widths">{{ dataForm.remark ? dataForm.remark : $t('wu') }}</span>
          </el-form-item>
          <el-form-item :label="$t('ziZhiTuPian')" class="lang">
            <div class="acea-row">
              <div
                v-for="(item, index) in dataForm.qualificationPictureData"
                :key="index"
                class="pictrue"
                draggable="true"
                @dragstart="handleDragStart($event, item)"
                @dragover.prevent="handleDragOver($event, item)"
                @dragenter="handleDragEnter($event, item)"
                @dragend="handleDragEnd($event, item)"
              >
                <el-image :src="item" :preview-src-list="dataForm.qualificationPictureData"> </el-image>
              </div>
            </div>
          </el-form-item>

          <el-form-item :label="$t('shiFouKaiQi')">
            <span class="widths">{{ dataForm.isSwitch ? $t('xianShi') : $t('yinCang') }}</span>
            <!--<el-switch v-model="dataForm.isSwitch" :disabled="isDisabled" :active-value="true" :inactive-value="false" active-text="显示"-->
            <!--inactive-text="隐藏"></el-switch>-->
          </el-form-item>
          <el-form-item :label="$t('shiFouTuiJian')">
            <span class="widths">{{ dataForm.isRecommend ? $t('tuiJian') : $t('buTuiJian') }}</span>
            <!--<el-switch v-model="dataForm.isRecommend" :disabled="isDisabled" :active-value="true" :inactive-value="false" active-text="推荐"-->
            <!--inactive-text="不推荐"></el-switch>-->
          </el-form-item>
          <el-form-item :label="$t('shiFouZiYing')">
            <span class="widths">{{ dataForm.isSelf ? $t('ziYing') : $t('feiZiYing') }}</span>
            <!--<el-switch v-model="dataForm.isSelf" :disabled="isDisabled" :active-value="true" :inactive-value="false" active-text="自营"-->
            <!--inactive-text="非自营"></el-switch>-->
          </el-form-item>
          <!-- <el-form-item :label="$t('shangPinShenHe')">
            <span class="widths">{{ dataForm.productSwitch ? $t('kaiQi') : $t('guanBi') }}</span>
          </el-form-item> -->
        </el-form>
      </div>
      <div v-if="isSHOW" class="from-foot-btn fix btn-shadow">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
          <el-form-item :label="$t('shenHeZhuangTai')" prop="auditStatus">
            <el-radio-group v-model="ruleForm.auditStatus">
              <el-radio :label="2">{{ $t('tongGuo') }}</el-radio>
              <el-radio :label="3">{{ $t('juJue') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="ruleForm.auditStatus === 3" :label="$t('yuanYin')" prop="denialReason">
            <el-input v-model="ruleForm.denialReason" type="textarea" :placeholder="$t('qingShuRuYuanYin')" />
          </el-form-item>
          <el-form-item>
            <el-button @click="close">{{ $t('cancel') }}</el-button>
            <el-button type="primary" @click="onSubmit('ruleForm')">{{
              loadingBtn ? $t('tiJiaoZhong') + ' ...' : $t('confirm')
            }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { merApplyAuditApi } from '@/api/merchant';
import { mapGetters } from 'vuex';
export default {
  name: 'audit',
  data() {
    return {
      dialogVisible: false,
      direction: 'rtl',
      isDisabled: true,
      rules: {
        auditStatus: [{ required: true, message: this.$t('qingXuanZeShenHeZhuangTai'), trigger: 'change' }],
        denialReason: [{ required: true, message: this.$t('qingTianXieJuJueYuanYin'), trigger: 'blur' }],
      },
      ruleForm: {
        denialReason: '',
        auditStatus: 2,
        id: '',
      },
      loadingBtn: false,
    };
  },
  props: {
    merData: {
      type: Object,
      default: () => null,
    },
    isSHOW: {
      type: String,
      default: () => '',
    },
  },
  computed: {
    ...mapGetters(['merchantClassify', 'merchantType']),
  },
  watch: {
    merData: {
      handler: function (val) {
        if (val.qualificationPicture) val.qualificationPictureData = JSON.parse(val.qualificationPicture);
        this.dataForm = { ...val };
      },
      deep: true,
    },
  },
  methods: {
    close() {
      this.dialogVisible = false;
      this.ruleForm = {
        denialReason: '',
        auditStatus: 2,
      };
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadingBtn = true;
          this.ruleForm.id = this.dataForm.id;
          merApplyAuditApi(this.ruleForm)
            .then((res) => {
              this.$message.success(this.$t('caoZuoChengGong'));
              this.dialogVisible = false;
              this.$emit('subSuccess');
              this.loadingBtn = false;
            })
            .catch((res) => {
              this.loadingBtn = false;
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  ::v-deep.el-drawer__header {
    margin-bottom: 0 !important;
    font-size: 20px;
  }
}
.demo-drawer__content {
  min-height: 600px;
}
.widths {
  width: 169px;
  display: inline-block;
  color: #606266;
}
.langcent {
  display: inline-block;
  color: #606266;
  width: 100%;
}
.lang {
  width: 100%;
  ::v-deep.el-form-item__content {
    width: 79%;
  }
}
.divBox {
  ::v-deep .el-input__inner:hover,
  ::v-deep.el-input > input,
  ::v-deep.el-textarea > textarea {
    border: none;
    padding: 0;
  }
  ::v-deep .el-form-item {
    margin-bottom: 6px;
  }
  ::v-deep.el-card__body {
    padding: 5px;
  }
  ::v-deep .el-input.is-disabled .el-input__inner {
    background: none;
    cursor: none;
    color: #606266;
  }
}
.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  .el-image {
    width: 100%;
    height: 100%;
  }
  video {
    width: 100%;
    height: 100%;
  }
}
</style>
